import './index.css'
import { Badge, Avatar } from 'antd'
import {  AlertOutlined, FundOutlined, FileOutlined, DatabaseOutlined, ApiOutlined } from '@ant-design/icons';
import { useEffect,useState} from 'react';


const iconMap = { MessageBox: <AlertOutlined />, Heap: <FundOutlined />, File: <FileOutlined />, Registry: <DatabaseOutlined />, Socket: <ApiOutlined />}
const MessageItem = (props) => {

  const {message,setCurrentMessage,setCurrentMessageStatus,messageStatus} = props;
  console.log('status:',messageStatus)
  
  const iconType = iconMap[message.hook_type]

  const handleClick = () => {
    setCurrentMessage(message);
    setCurrentMessageStatus(messageStatus);
  }
  
  const [normalNum,setNormalNum] = useState(0);
  const [warningNum,setWarningNum] = useState(0);
  const [dangerNum,setDangerNum] = useState(0);

  useEffect(() => {
    let newNormalNum = 0;
    let newWarningNum = 0;
    let newDangerNum = 0;
    messageStatus.map((item) => {
      if(item.code >= 100 && item.code < 200) {
        newNormalNum++;
      } else if(item.code >= 200 && item.code < 300) {
        newWarningNum++;
      } else if(item.code >= 300 && item.code < 400) {
        newDangerNum++;
      }
    })
    setNormalNum(newNormalNum);
    setWarningNum(newWarningNum);
    setDangerNum(newDangerNum);
  },[messageStatus])

  return (
    <div className='box' onClick={handleClick}>
      <div className='icon'>
        <Avatar icon={iconType} size={'large'} style={{ backgroundColor: 'skyblue' }}>
        </Avatar>
      </div>
      <div className='content'>
        <div className='title'>{message.api_name}</div>
        <div className='description'>{messageStatus.length>0&&messageStatus[0].message}</div>
      </div>
      <div className='right'>
        <div className='time'>{message.timestamp}</div>
        <div className='badge'>
          {
            normalNum > 0 && <Badge count={normalNum} style={{ backgroundColor: 'rgb(45, 183, 245)' }}></Badge>
          }
          {
            warningNum > 0 && <Badge count={warningNum} style={{ backgroundColor: 'orange' }}></Badge>
          }
          {
            dangerNum > 0 && <Badge count={dangerNum} style={{ backgroundColor: 'red' }}></Badge>
          }
        </div>
      </div>
    </div>
  )
}

export default MessageItem;